<script setup>
import {getCurrentInstance, onBeforeMount, reactive, ref} from "vue";
import router from "@/router";
import {post} from "@/net";
import {ElMessage} from "element-plus";

const dialogFormVisible = ref(false)
const formLabelWidth = '60px'
const singers = reactive([])
const {proxy} = getCurrentInstance()

const form = reactive({
    sid: 0,
    gid: proxy.$route.query.gid,
    judge_score: 0.0
})

onBeforeMount(() => {
    getGameSingers()
})

const getGameSingers = () => {
    post('/api/game/game-singers', {
                gid: proxy.$route.query.gid,
            }, (data) => {
                singers.value = data
                getScore()
            }
    )
}

const getScore = () => {
    post('/api/game/game-judge-score', {
                gid: proxy.$route.query.gid,
            }, (data) => {
                for (let i = 0; i < singers.value.length; i++) {
                    singers.value[i].score = data[i].judge_score
                }
                // console.log(singers.value)
            }
    )
}

const getJudgeScore = (sid, score) => {
    form.sid = sid
    form.judge_score = score
    dialogFormVisible.value = true
}

const updateScore = () => {
    post('/api/game/judge-score', {
                gid: form.gid,
                sid: form.sid,
                judge_score: form.judge_score
            }, (massage) => {
                ElMessage.success(massage)
                dialogFormVisible.value = false
                getGameSingers()
            }, () => {
                ElMessage.warning('评分更新失败')
                dialogFormVisible.value = false
            }
    )
}

const getImgSrc = (picName) => {
    return `http://localhost:8080/uploaded/${picName}`
}
</script>

<template>
    <div>
        <div>
            <el-button @click="router.push('/index/game')" type="warning">{{ '返回' }}</el-button>
        </div>
        <div class="judge-list">
            <el-space wrap :size="30">
                <el-card :body-style="{ padding: '0px' }" v-for="singer in singers.value">
                    <el-image
                            fit="cover"
                            :src="getImgSrc(singer.pic)"
                            class="image"
                    />
                    <div style="padding: 14px">
                        <span style="font-weight: bold">{{ singer.name }}</span>
                        <div style="margin-top: 10px">
                            当前裁判评分：{{ singer.score }}
                        </div>
                        <div class="bottom">
                            <el-button plain @click="getJudgeScore(singer.sid, singer.score)" type="primary">点击评分
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-space>
            <el-dialog v-model="dialogFormVisible" title="选手评分" width="500" center>
                <el-form :model="form" class="score-form">
                    <el-form-item label="分数" :label-width="formLabelWidth">
                        <el-input v-model="form.judge_score" autocomplete="off"/>
                        <el-input v-model="form.sid" style="display: none"/>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="updateScore">
                            提交
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped>
.judge-list {
    margin: 20px 140px 0 140px;
}

.image {
    width: 280px;
    height: 280px;
}

.bottom {
    margin-top: 10px;
}

.score-form {
    margin-top: 20px;
}
</style>